<template>
	<view class="wrap">
		<view style="display: inline-flex;width: 100%;height: 90rpx;position: fixed;background-color: #F5F3F3;z-index: 999;padding: 30rpx;">
			 
			<view style="height: 95rpx;margin-top: -10rpx;margin-right: 25rpx;" @click="chooseLocation()">
				<u-icon label-size="32" label-pos="left" :label="location.name" color="#B0B0B0" name="arrow-down-fill"
					size="14"></u-icon>
			</view>
			
			<view style="flex: 1;height: 60rpx;margin-top:-15rpx;z-index: 9999;" @click="gosearch()">
				<u-search input-align="center" :show-action="false" shape="square" placeholder="🔍搜索影院"
					v-model="keyword" bg-color="#FFFFFF" search-icon-color="#FFFFFF" color="#666666"></u-search>
			</view>
			
		</view>
		<!-- <view style="padding: 30rpx;display: inline-flex;width: 100%;height: 95rpx;background-color: #F3F3F3;">
			
		</view> -->
		<view style="height: 90rpx;">
			
		</view>
		<view style="padding: 30rpx;">
			<view style="" v-for="(item,index) in yyList" :key="index" >
				<view style="display: block;" >
					<view style="width: 100%;display: flex;" @click="goInfo(item)">
						<view style="width: 550rpx;">
							<text class="hide"
								style="font-weight: 500;font-size: 32rpx;color: color: rgba(0, 0, 0, 0.6);;">{{item.name}}</text>
						</view>
						<view style="flex: 1;float: right;margin-right: 1rpx;">
							<view style="float: right;margin-right: 1rpx;">
								<text style="font-weight: 500;color: #EA5344;font-size: 32rpx;">{{item.cprice}}</text>
								<text style="font-weight: 500;color: #EA5344;font-size: 28rpx;">元</text>
								<text style="color: rgba(42, 42, 42, 0.7) ;">起</text>
							</view>
							
						</view>
					</view>
					<view style="width: 100%;display: flex;" @click="goInfo(item)">
						<view style="width: 550rpx;">
							<text class="hide"
							
								style="margin-top: 15rpx; font-weight: 400;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);">{{item.address}}</text>
							
						</view>
						<view style="flex: 1;">
							<text v-if="item.distance < 1000"
								style="float: right;margin-right: 1rpx;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);font-weight: 400;margin-top: 15rpx;">{{item.distance}}m</text>
							<text v-else
								style="float: right;margin-right: 1rpx;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);font-weight: 400;margin-top: 15rpx;">{{(item.distance/1000).toFixed(1)}}km</text>
						</view>
					</view>
				</view>
				<u-line color="#d5d5d5" margin="15rpx 0rpx" />
			</view>
		</view>
		
		
		
		<view v-if="yyList.length >0">
			<u-loadmore :status="status" />
		</view>
		<view v-if="shownull" style="margin-top: 30rpx;">
			<u-empty icon-size="280" margin-top="200" font-size="30"  text="暂无影院信息" src="/static/images/yy.png"></u-empty>
		</view>
		<aui-loading ref="auiLoading" :type="auiLoading.type" :direction="auiLoading.row" :msg="auiLoading.msg"
			:mask="auiLoading.mask"></aui-loading>
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	import {
		aui
	} from '@/components/aui-loading/common/aui/js/aui.js';
	import auiLoading from '@/components/aui-loading/aui-loading.vue';
	export default {
		components: {
			auiLoading
		},
		data() {
			return {
				auiLoading: {
					shownull:false,
					show: false,
					type: 3,
					direction: 'row',
					msg: '加载中',
					mask: true,

				},
				status: 'loadmore',
				page: 1,
				keyword: "",
				yyList: [],
				location: {
					name: "暂无位置",
					cityId: "1"
				},
				latitude: 0,
				longitude: 0,
				allpage: 0
			}
		},
		onShow() {
			if(this.location.cityId !=Config.loaction.cityId){
				this.location = Config.loaction;
				this.longitude = Config.lon;
				this.latitude = Config.lat;
				this.page = 1
				this.yyList = []
				
				this.getCinemaList()
				this.status = 'loadmore';
			}
			
			
		},

		onLoad() {
			this.location = Config.loaction;
			this.longitude = Config.lon;
			this.latitude = Config.lat;
			this.page = 1
			this.yyList = []
			
			this.getCinemaList()
			this.status = 'loadmore';
		},
		onPullDownRefresh() {
			this.page = 1
			this.yyList = []
			
			this.getCinemaList()
			this.status = 'loadmore';
		},
		onReachBottom() {
			if (this.page >= this.allpage) {
				this.status = 'nomore';
				return;
			}
			this.status = 'loading';
			this.page = ++this.page;
			this.getCinemaList()
			this.status = 'loadmore';

		},
		methods: {
			pageTotal(rowCount, pageSize) {
				if (rowCount == null || rowCount == "") {
					return 0;
				} else {
					if (pageSize != 0 && rowCount % pageSize == 0) {
						return parseInt(rowCount / pageSize)
					}
					if (pageSize != 0 && rowCount % pageSize != 0) {
						return parseInt(rowCount / pageSize) + 1;
					}
				}
			},
			gosearch() {
				uni.navigateTo({
					url: '/pages/search/search?type=cinema'
				});
			},
			chooseLocation() {
				uni.navigateTo({
					url: '/pages/location/location'
				});
			},
			goInfo(item) {

				uni.navigateTo({
					url: '../cinemainfo/cinemainfo?Id=' + item.id + '&name=' + item.name + '&address=' + item
						.address + '&coord=' + item.coord
				});
			},
			getCinemaList() {
				let that = this;
				that.$refs.auiLoading.show();
				uni.request({
					url: Config.ServerIP + "/movie/app/movie/filmShowCinema/film/city/list",
					method: "POST",
					data: {
						cityId: that.location.cityId,
						direction: "asc",
						orderBy: 'distance',
						latitude: that.latitude,
						longitude: that.longitude,
						pageNum: that.page,
						pageSize: 20
					},
					success: (res) => {
						let c = that.yyList
						that.yyList = c.concat(res.data.data)
						that.allpage = that.pageTotal(res.data.total, 20);

					},
					fail() {

					},
					complete() {
						that.$refs.auiLoading.hide();
						uni.stopPullDownRefresh()
						if(that.yyList.length <=0){
							that.shownull =true
						}else{
							that.shownull =false
						}
					}
				})


			}
		}
	}
</script>

<style>
	.hide {
		display: -webkit-box;
		/*设置为弹性盒子*/
		-webkit-line-clamp: 1;
		/*最多显示1行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*超出显示为省略号*/
		-webkit-box-orient: vertical;
		/* 从上向下垂直排列子元素。 */

	}

	.box {
		position: relative;
		display: flex;
		height: 350upx;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 10upx;
		margin-top: 30upx;
		flex: 0 0 350upx;
		background: #ffffff;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
</style>
